<template>
  <swiper :options="swiperOption" class="uu">
    <swiper-slide  v-for="items in boxurl" :key="items.id">
      <div class="uuls" v-for="item in items" >
        <img :src="item.url" alt="">
        <p>{{item.title}}</p>
      </div>
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>
<script>
  export default{
    data(){
      return {
          swiperOption: {
            pagination: {
              el: '.swiper-pagination'
            },
          loop:true,
        },
      }
    },
    props:["swiperList"],
    computed:{
      boxurl(){
        var resu=[];
        this.swiperList.forEach((item,index)=>{
          var num = Math.floor(index/8);
          if(!resu[num])resu[num]=[];
          resu[num].push(item)
        })
        return resu
      }
    }
  }
</script>
<style scoped>
  .uu{
    width:100%;
    text-align:center;
    overflow:hidden;
    background-color: #fff;
    padding:0.1rem 0;
  }
  .uuls {
    width:25%;
    height:0.75rem;
    float:left;
  }
  .uuls img{
    width:0.55rem;
    display:block;
    margin:0 auto;
  }
  .uuls p{
    font-size:0.14rem;
  }

 .uu .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: -.03rem;

  }
</style>
